<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/7
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<jsp:include page="include-head.jsp"></jsp:include>
<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script src="crowdjs/my-menu.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        //将zTree的加载函数，封装起来
        generateTree();

        // 打开模态框,因为按钮是动态生成，需要用on绑定click事件
        $("#treeDemo").on("click",".addBtn",function () {
            // 新增，需要存当前节点的id作为父节点
            window.pid = this.id;
            // 打开新增模态框
            $("#menuAddModal").modal("show");
        })

        // 新增模态框里面的保存按钮，点击后进行ajax请求
        $("#menuSaveBtn").click(function () {
            var name = $.trim($("#menuAddModal [name='name']").val());
            var url = $.trim($("#menuAddModal [name='url']").val());
            var icon = $("#menuAddModal [name='icon']:checked").val();

            var menuData = {
                "pid":window.pid,
                "name":name,
                "url":url,
                "icon":icon
            }
            // console.log(menuData);
            $.ajax({
                "url":"menu/save.json",
                "type":"post",
                "data":menuData,
                "dataType":"json",
                "success":function (responseData) {
                    if(responseData.result == "SUCCESS"){
                        layer.msg("添加节点成功！");
                        // 关闭模态框
                        $("#menuAddModal").modal("hide");
                        // 清空表单
                        // jQuery 对象调用click()函数，里面不传任何参数，相当于用户点击了一下
                        $("#menuResetBtn").click();
                        generateTree();
                    }
                    if(responseData.result == "FAILED"){
                        layer.msg(responseData.message);
                    }
                },
                "error":function (responseData) {
                    layer.msg(responseData.status+" "+responseData.statusText);
                }
            })
        })

        // 打开修改模态框，先绑定click事件到修改按钮上,并且回显数据
        $("#treeDemo").on("click",".editBtn",function () {
            // 修改，需要存当前节点的id
            window.menuId = this.id;
            // 打开x修改模态框
            $("#menuEditModal").modal("show");

            // 查阅zTree api
            // zTree里面zTreeObj.getNodeByParam(key, value);可以通过整棵树，以id为查询条件，把树节点TreeNode找出来
            // 获取zTreeObj
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 使用zTreeObj.getNodeByParam(key, value)查询,返回TreeNode
            var key = "id";
            var value = window.menuId;
            var treeNode = zTreeObj.getNodeByParam(key, value);
            // 页面的回显
            $("#menuEditModal [name='name']").val(treeNode.name);
            $("#menuEditModal [name='url']").val(treeNode.url);
            // 回显radio 可以这样理解：被选中的radio 的value 属性可以组成一个数组，
            // 然后再用这个数组设置回radio，就能够把对应的值选中
            $("#menuEditModal [name='icon']").val([treeNode.icon]);
        })

        // 点击修改按钮，发送ajax请求
        $("#menuEditBtn").click(function () {
            var menuId = window.menuId;
            var name = $.trim($("#menuEditModal [name='name']").val());
            var url = $.trim($("#menuEditModal [name='url']").val());
            var icon = $("#menuEditModal [name='icon']:checked").val();

            var menuData = {
                "id":menuId,
                "name":name,
                "url":url,
                "icon":icon
            }


            $.ajax({
                "url":"menu/update.json",
                "type":"post",
                "data":menuData,
                "dataType":"json",
                "success":function (responseData) {
                    if(responseData.result == "SUCCESS"){
                        layer.msg("修改节点成功！");
                        // 关闭模态框
                        $("#menuEditModal").modal("hide");
                        // 清空表单
                        // jQuery 对象调用click()函数，里面不传任何参数，相当于用户点击了一下
                        $("#menuResetBtn").click();
                        generateTree();
                    }
                    if(responseData.result == "FAILED"){
                        layer.msg(responseData.message);
                    }
                },
                "error":function (responseData) {
                    layer.msg(responseData.status+" "+responseData.statusText);
                }
            })
        })


        // 打开删除模态框，先绑定click事件到删除按钮上,并且回显数据
        $("#treeDemo").on("click",".removeBtn",function () {
            // 删除，需要存当前节点的id
            window.menuId = this.id;
            // 打开x修改模态框
            $("#menuConfirmModal").modal("show");

            // 查阅zTree api
            // zTree里面zTreeObj.getNodeByParam(key, value);可以通过整棵树，以id为查询条件，把树节点TreeNode找出来
            // 获取zTreeObj
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 使用zTreeObj.getNodeByParam(key, value)查询,返回TreeNode
            var key = "id";
            var value = window.menuId;
            var treeNode = zTreeObj.getNodeByParam(key, value);
            // 页面的回显
            // append()和html()都可以
            // append():拼接  html():覆盖，因为这里的内容是空，所以两个都可以
            $("#removeNodeSpan").append("<i class='"+treeNode.icon+"'></i>"+treeNode.name+"");
        })

        // 点击删除按钮，发送ajax请求
        $("#confirmBtn").click(function () {
            var menuId = window.menuId;

            $.ajax({
                "url":"menu/remove.json",
                "type":"post",
                "data":{
                    "menuId":menuId
                },
                "dataType":"json",
                "success":function (responseData) {
                    if(responseData.result == "SUCCESS"){
                        layer.msg("删除节点成功！");
                        // 关闭模态框
                        $("#menuConfirmModal").modal("hide");
                        // 不用清空，因为这个模态框没有form表单，没有输入的数据，所以不需要清空
                        generateTree();
                    }
                    if(responseData.result == "FAILED"){
                        layer.msg(responseData.message);
                    }
                },
                "error":function (responseData) {
                    layer.msg(responseData.status+" "+responseData.statusText);
                }
            })
        })

    })

</script>

<body>
<jsp:include page="include-nav.jsp"></jsp:include>



<div class="container-fluid">
    <div class="row">
        <jsp:include page="include-sidebar.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign"></i>
                    </div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<jsp:include page="modal-menu-add.jsp"></jsp:include>
<jsp:include page="modal-menu-edit.jsp"></jsp:include>
<jsp:include page="modal-menu-confirm.jsp"></jsp:include>
</html>
